<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏（1-100）</title>
    <script src="./jquery-3.7.1.min.js"></script>
</head>

<body>
    <div><button id="button1">重新开始一句游戏</button></div>
    <div><span>请输入你要猜的数字：</span><input type="text" name=""><button id="button2">猜</button></div>
    <div><span id="count">已经猜的次数为：0</span></div>
    <div><span>结果：</span><span id="result"></span></div>

    <script>
        $(document).ready(function () {
            let number = parseInt((Math.random(0, 1)) * 100 + 1);
            let count = 0;

            console.log(number);
            $("#button2").click(function () {
                count++;
                $("#count").text("已经猜的次数为:" + count)
                let guessNumber = $("input:text").val();
                if (guessNumber == "") {
                    $("#result").text("请输入数字");
                    $("#result").css("color", "red");
                    return;
                }
                console.log(guessNumber);
                if (guessNumber > number) {
                    $("#result").text("猜大了");
                    $("#result").css("color", "red");
                } else if (guessNumber < number) {
                    $("#result").text("猜小了");
                    $("#result").css("color", "red");
                } else if (guessNumber == number) {
                    $("#result").text("猜对了");
                    $("#result").css("color", "green");
                } else {
                    $("#result").text("请输入数字");
                    $("#result").css("color", "red");
                }

            })
            $("#button1").click(function () {
                number = parseInt((Math.random(0, 1)) * 100 + 1);
                console.log(number);
                
                count=0;
                $("input:text").empty();
                $("#count").text("已经猜的次数为:0")
                $("#result").empty();
            })
        })


    </script>
</body>

</html>